<template>
  <view>
    <!-- 展示区 -->
    <view class="items">
      <!-- 每一项 -->
      <view class="item" v-for="item in addressInfo" :key="item.id">
        <text>我的地址：{{item.build}}-{{item.defalutAddress ? item.defalutAddress + '-' : ''}}{{item.houseNumber}}</text> <br>
        <!-- <text>我的地址：{{item.build + '-' + item.defalutAddress + '-' + item.houseNumber}}</text> <br> -->
        <text>联系方式：{{item.phone}}</text>
        <view class="iconfont icon-shezhi yanS" @click="reomveAddress(item.id)">删除</view>
      </view>

      <text class="footer">------&nbsp;&nbsp;已显示全部&nbsp;&nbsp;------</text>
    </view>

    <button class="addAddress" @click="goAddAddress">添加地址</button>
  </view>
</template>

<script>
  import { getUserAddress, UserRemoveAddress } from '../../request/api.js'
  export default {
    data() {
      return {
        addressInfo: [],
        // 地址id
        id: ''
      }
    },
    onShow() {
      this.getAddress()
    },
    methods: {
      // 获取所有地址信息
      getAddress(){
        const id = uni.getStorageSync('userInfo').id
        getUserAddress('',id).then((res) => {
          // console.log(res)
          this.addressInfo = res.user
        }).catch((err) => {
          console.log(err)
        })
      },
      // 删除地址
      reomveAddress(id){
        const id1 = id
        UserRemoveAddress('', id1).then((res) => {
          // console.log(res)
          this.getAddress()
        }).catch((err) => {
          console.log(err)
        })
      },
      
      // 去添加地址页
      goAddAddress() {
        uni.navigateTo({
          url: '/pages/addAddress/addAddress'
        })
      }
    }
  }
</script>

<style>
  page {
    background-color: #f2f2f2;
  }

  /* 展示区 */
  .items {
    margin-top: 16rpx;
  }

  /* 每一项 */
  .item {
    width: 84%;
    height: 140rpx;
    padding: 20rpx;
    margin: 0 auto;
    margin-bottom: 24rpx;
    border-radius: 10rpx;
    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
    position: relative;
  }

  /* 删除样式 */
  .yanS {
    color: red;
    position: absolute;
    bottom: 20rpx;
    right: 20rpx;
  }

  .footer {
    color: #b3b3b3;
    display: flex;
    justify-content: center;
  }

  /* 添加按钮 */
  .addAddress {
    width: 90%;
    border-radius: 100rpx;
    background: #0f67d0;
    color: #fff;
    margin-top: 100rpx;
  }
</style>